<script setup lang="ts">
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
import type { CSSProperties } from 'vue'
import { useLayoutState } from '../../basic-layout/context'
import Menu from '../menu/index.vue'
const { collapsed, handleCollapsed, layout, logo, theme, title, collapsedWidth, siderWidth, headerHeight, fixedSider, isMobile } = useLayoutState()

const prefixCls = shallowRef('ant-pro-sider')

const siderStyle = computed<CSSProperties>(() => {
  return {
    paddingTop: `${(layout.value !== 'side' && !isMobile.value) ? headerHeight.value : 0}px`,
    transition: 'background-color 0.3s ease 0s, min-width 0.3s ease 0s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s',
    overflow: 'hidden',
    "background-image": "linear-gradient(to bottom, #00A9B0 0%, #085078 100%) !important",
    'box-shadow': '0 0 15px rgba(0,0,0, .5)'
  }
})

// background-image: linear-gradient(to right, ##85D8CE 0%, #02AAB0 51%, #02AAB0 100%) !important;

const cls = computed(() => ({
  [prefixCls.value]: true,
  [`${prefixCls.value}-fixed`]: fixedSider.value,
  [`${prefixCls.value}-layout-${layout.value}`]: !!layout.value,
}))

const showLogo = computed(() => {
  return (layout.value === 'side' || isMobile.value) && layout.value !== 'mix'
})
</script>

<template>
  <div v-if="fixedSider" :style="{
    width: collapsed ? `${collapsedWidth}px` : `${siderWidth}px`,
    maxWidth: collapsed ? `${collapsedWidth}px` : `${siderWidth}px`,
    minWidth: collapsed ? `${collapsedWidth}px` : `${siderWidth}px`,
    ...siderStyle,
  }" />

  <a-layout-sider :theme="theme === 'inverted' ? 'dark' : 'light'" :collapsed="collapsed && !isMobile" :trigger="null"
    :collapsed-width="collapsedWidth" :width="siderWidth" collapsible :class="cls" :style="siderStyle">
    <div v-if="showLogo" class="ant-pro-sider-logo logo_pro"
      :class="(collapsed && !isMobile) ? 'ant-pro-sider-collapsed' : ''">
      <a>
        <img :src="logo ">
        <br />
        <h1 v-if="!collapsed || isMobile">
          <span>威海热电 · 公共建筑</span>
          <br />
          能耗管控平台
        </h1>
      </a>
    </div>

    <div class="flex-1 of-x-hidden of-y-auto">
      <Menu />
    </div>
    <div style="background: rgba(255, 255, 255, 0);" v-if="!isMobile" class="w-100% flex-shrink-0 ant-pro-sider-collapsed-button"
      :class="theme === 'inverted' ? 'ant-pro-sider-collapsed-button-inverted' : ''">
      <a-menu style="background: rgba(255, 255, 255, 0.5);" class="ant-pro-sider-menu" mode="inline" :theme="theme === 'inverted' ? 'dark' : 'light'"
        :selectable="false" @click="handleCollapsed?.(!collapsed)">
        <a-menu-item>
          <template #icon>
            <MenuFoldOutlined v-if="collapsed" />
            <MenuUnfoldOutlined v-else />
          </template>
        </a-menu-item>
      </a-menu>
    </div>
  </a-layout-sider>
</template>

<style lang="less">
@import "./index.less";

.img_sider {
   background: url();
}
</style>
